<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="/resources/bootstrap/css/bootstrap.min.css">
    <!-- 可选的Bootstrap主题文件（一般不用引入） -->
    <link rel="stylesheet" href="/resources/bootstrap/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="/resources/public/css/public.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="/resources/jquery/jquery-2.1.1.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="/resources/bootstrap/js/bootstrap.min.js"></script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="/resources/ueditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="/resources/ueditor/ueditor.all.js"></script>
    <script type="text/javascript" src="/resources/bootstrap/bootbox/bootbox.min.js"></script>
    <script type="text/javascript" src="/resources/bootstrap/bootbox/example.js"></script>
    <script type="text/javascript" src="/resources/corejs/core-min.js"></script>
    <script type="text/javascript" src="/resources/corejs/enc-base64-min.js"></script>
    <title>Document</title>
</head>
<style>
    .bb-alert {
        position:fixed;
        bottom:25%;
        right:0;
        margin-bottom:0;
        font-size:1.2em;
        padding:1em 1.3em;
        z-index:2000;
    }
</style>
<body>
<div class="bb-alert alert alert-info" style="display: none;">
    <span>Hello world callback</span>
</div>
<%@include file="/WEB-INF/views/header.jsp" %>
<div class="container main-container" style="width: 85%">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">Unicode编码转换</h3>
                </div>
                <div class="panel-body" style="height: 550px">
                    <div class="input-group" style="width: 100%;">
                        <%--<input type="text" class="form-control" style="height:250px;">--%>
                        <textarea id="content" name="content" class="form-control" rows="20" cols="20"
                                  style="height:250px;">请把你需要转换的内容粘贴在这里。[http://an0nymous.coding.io/]</textarea>
                    </div>
                    <div class="btn-group btn-group-justified">
                        <div class="btn-group">
                            <button type="button" class="btn btn-default" onclick="AsciiToUnicode()">ASCII 转换 Unicode↓</button>
                        </div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-default" onclick="UnicodeToAscii();">Unicode 转换 ASCII↓</button>
                        </div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-default" onclick="unicode2chinese()">Unicode 转换 中文↓</button>
                        </div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-default" onclick="chinese2unicode()">中文 转换 Unicode↓</button>
                        </div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-default" onclick="base64_encode()">BASE64加密↓</button>
                        </div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-default" onclick="base64_decode()">BASE64解密↓</button>
                        </div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-default" onclick="UrlEncode()">URL编码↓</button>
                        </div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-default" onclick="UrlDecode()">URL解码↓</button>
                        </div>
                    </div>
                    <div class="input-group" style="width: 100%;">
                            <textarea id="result" name="result" class="form-control" style="height:250px;" rows="20" cols="20" ></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    $(function() {
        Example.init({
            "selector": ".bb-alert"
        });
    });
    //ASCII 转换 Unicode
    function AsciiToUnicode() {

        if (document.getElementById('content').value == '') {
            bootbox.confirm("文本框中没有代码！", function(result) {
                Example.show("Confirm result: "+result);
            });
            return;
        }
        document.getElementById('result').value = '';
        for (var i = 0; i < document.getElementById('content').value.length; i++)
            result.value += '&#' + document.getElementById('content').value.charCodeAt(i) + ';';
        document.getElementById('content').focus();
    }

    //Unicode 转换 ASCII
    function UnicodeToAscii() {
        var code = document.getElementById('content').value.match(/&#(\d+);/g);
        if (code == null) {
            bootbox.confirm("文本框中没有合法的Unicode代码！", function(result) {
                Example.show("Confirm result: "+result);
            });
            document.getElementById('content').focus();
            return;
        }
        document.getElementById('result').value = '';
        for (var i = 0; i < code.length; i++)
            document.getElementById('result').value += String.fromCharCode(code[i].replace(/[&#;]/g, ''));
        document.getElementById('content').focus();
    }
    function preview() {
        var win = window.open();
        win.document.open('text/html', 'replace');
        win.document.writeln(document.getElementById('result').value);
        win.document.close();
    }

    function unicode2chinese() {
        var obj = document.getElementById("content");
        var strContent = obj.value;
        if (strContent == null || strContent.length == 0) {
            bootbox.confirm("please input unicode value", function(result) {
                Example.show("Confirm result: "+result);
            });
            return;
        }
        var strTest = unescape(strContent.replace(/\\u/g, '%u'));
        result.value = strTest;
    }
    function chinese2unicode() {
        var objInChinese = document.getElementById("content");
        var strContent = objInChinese.value;
        if (strContent == null || strContent.length == 0) {
            bootbox.confirm("please input chinese value", function(result) {
                Example.show("Confirm result: "+result);
            });
            return;
        }
        var strTest = strContent.replace(/[^\u0000-\u00FF]/g, function ($0) {
            return escape($0).replace(/(%u)(\w{4})/gi, "&#x$2;")
        });
        strTest = strTest.replace(/;/g, '');
        strTest = strTest.replace(/&#x/g, '\\u');
        result.value = strTest;
    }

    function base64_encode() {
        var str = CryptoJS.enc.Utf8.parse(jQuery("#content").val());
        var base64 = CryptoJS.enc.Base64.stringify(str);
        jQuery("#result").val(base64);
    }
    function base64_decode() {
        var words = CryptoJS.enc.Base64.parse(jQuery("#content").val());
        jQuery("#result").val(words.toString(CryptoJS.enc.Utf8));
    }

    function UrlEncode(){
        var str = jQuery("#content").val();
        jQuery("#result").val(encodeURI(str));
    }
    function UrlDecode(){
        var str = jQuery("#content").val();
        jQuery("#result").val(decodeURI(str));
    }
</script>
</html>